<template>
  <div class="weatherContain">
    <h1>城市天气查询</h1>
    <div class="search">
      <input
        v-model="cityInput"
        @keyup.enter="getWeather"
        placeholder="请输入城市名"
      />
      <button @click="getWeather">搜索</button>
    </div>

    <div class="cityList">
      <span v-for="city in cities" :key="city" @click="selectCity(city)">
        {{ city }}
      </span>
    </div>

    <div v-if="loading" class="loading">加载中...</div>

    <div v-if="error" class="error">{{ error }}</div>

    <div v-if="weatherData">
      <h2>{{ weatherData.city }} 未来7天天气</h2>
      <div class="weather">
        <div v-for="day in weatherData.data" :key="day.date">
          <h3>{{ day.date }}</h3>
          <p>白天: {{ day.wea_day }}</p>
          <p>夜间: {{ day.wea_night }}</p>
          <p>温度: {{ day.tem2 }}°C ~ {{ day.tem1 }}°C</p>
          <p>风向: {{ day.win }}</p>
          <p>风速: {{ day.win_speed }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cityInput: "",
      weatherData: null,
      loading: false,
      error: "",
      cities: ["北京", "上海", "广州", "深圳", "杭州", "成都", "武汉", "南京"],
    };
  },
  methods: {
    getWeather() {
      if (!this.cityInput.trim()) {
        this.error = "请输入城市名";
        return;
      }

      this.loading = true;
      this.error = "";

      axios
        .get("http://gfeljm.tianqiapi.com/api", {
          params: {
            version: "v9",
            appid: "45131579",
            appsecret: "Pox1PzCb",
            city: this.cityInput,
          },
        })
        .then((response) => {
          if (response.data && response.data.data) {
            this.weatherData = {
              city: response.data.city,
              data: response.data.data,
            };
          } else {
            this.error = "未找到该城市的天气信息";
          }
        })
        .catch((err) => {
          console.error("获取天气数据失败:", err);
          this.error = "获取天气数据失败，请稍后重试";
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectCity(city) {
      this.cityInput = city;
      this.getWeather();
    },
  },
};
</script>

<style scoped>
.weatherContain {
  width: 1000px;
  margin: 0 auto;
}

.search {
  display: flex;
  margin-bottom: 20px;
}

.search input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

.search button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
}

.search button:hover {
  background-color: #45a049;
}

.cityList {
  margin-bottom: 20px;
}

.cityList span {
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border-radius: 15px;
  cursor: pointer;
}

.cityList span:hover {
  background-color: #e0e0e0;
}

.weather {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.weather div {
  box-sizing: border-box;
  width: 180px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.loading,
.error {
  padding: 15px;
  text-align: center;
  margin: 20px 0;
}

.error {
  color: #d32f2f;
  background-color: #fde0e0;
  border: 1px solid #ef9a9a;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

h3 {
  margin-top: 0;
  color: #2c3e50;
}
</style>